<template>
  <div class="deepRewrite">
    <el-row :gutter="40">
        <!-- <el-col :span="6">
          <button class="btnInput" @click="changeInput">原文输入<i :class="iconText"></i></button>
        </el-col> -->
        <el-col :span="24">
          <div class="tabs">
            <div class="tabs-header">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                @click="tabsChange(tab,index)"
                :class="{ active: currentTab === index }"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </el-col>
      </el-row>
    <el-dialog
      title="改写暂存库"
      :visible.sync="dialogVisible"
      width="50%">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="cache_article_id"
          align="center"
          width="70"
          label="任务ID">
        </el-table-column>
        <el-table-column
          prop="update_time"
          align="center"
          width="150"
          label="提交时间">
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          show-overflow-tooltip
          label="标题">
        </el-table-column>
        <el-table-column
          prop="title"
          align="center"
          width="100"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 5">生成中</span>
            <span v-if="scope.row.status == 10">图片采集中</span>
            <span v-if="scope.row.status == 20">生成完成</span>
            <span v-if="scope.row.status == 30">生成失败</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="180"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" :disabled="scope.row.status != 20" @click.stop="goEdit(scope.row)">查看/编辑</el-button>
            <!-- <el-button type="primary" size="mini" :disabled="scope.row.status != 20" @click.stop="submitDia(scope.row)">发布</el-button> -->
            <el-button size="mini" @click.stop="delArticle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current_page"
          :page-size="per_page"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog
        width="30%"
        title="发布内容"
        :visible.sync="innerVisible"
        append-to-body
        v-loading="loading">
        <span>发布到</span>
        <el-select v-model="form.type" style="width: 25%;" placeholder="发布地址">
          <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="form.module" style="width: 25%;" placeholder="发布方式">
          <el-option label="动态" value="10"></el-option>
          <el-option label="图文" value="20"></el-option>
        </el-select>
        <el-button type="primary" :disabled="loading" @click="submit">确定</el-button>
      </el-dialog>
    </el-dialog>
    <transition name="slide-fade">
      <div class="flex" v-if="currentTab == 0">
        <div class="content">
          <el-row :gutter="40">
            <transition name="fade" mode="out-in">
              <div>
                <el-col style="margin-top: 1%" :span="24">
                  <el-input
                    type="text"
                    class="text-box"
                    placeholder="请在这里输入文章标题"
                    v-model="form.title"
                    @focus="inputevent(true)"
                    @blur="inputevent(false)">
                  </el-input>
                </el-col>
                <el-col :span="24" style="margin-top: 1%" v-loading="loading" element-loading-text="文章生成中，预计需要数十秒至数分钟，请耐心等待...">
                  <el-input
                    type="textarea"
                    :rows="24"
                    class="textarea-box"
                    placeholder="请在这里输入原文"
                    v-model="form.source_text"
                    @focus="inputevent(true)"
                    @blur="inputevent(false)">
                  </el-input>
                </el-col>
              </div>
            </transition>
            <el-col :span="24" style="display: flex;justify-content: space-between;margin: 1% 0;">
              <div></div>
              <div>
                <el-button type="primary" :disabled="loading" @click="synonym">开始改写</el-button>
                <el-button @click="record" class="colorBtn">改写暂存库</el-button>
                <el-button @click="reset">清空</el-button>
              </div>
            </el-col>
            <!-- <el-col :span="24" v-loading="loadings">
              <Tinymce v-model="editorData"></Tinymce>
            </el-col> -->
          </el-row>
          <!-- <el-row style="margin-top: 2%;" :gutter="40">
            <el-col :span="12" v-if="editorData">
              <span>发布到</span>
              <el-select v-model="form.type" style="width: 25%;" placeholder="发布地址">
                <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="form.module" style="width: 25%;" placeholder="发布方式">
                <el-option label="动态" value="10"></el-option>
                <el-option label="图文" value="20"></el-option>
              </el-select>
              <el-button type="primary" :disabled="loading" @click="submit">确定</el-button>
              <el-button type="primary" :disabled="loading" @click="saveArticle">保存</el-button>
            </el-col>
          </el-row> -->
        </div>
      </div>
      <deepOriginal :inputState="inputState" v-else-if="currentTab == 1"></deepOriginal>
      <deepOriginalTitle :inputState="inputState" v-else></deepOriginalTitle>
    </transition>
  </div>
</template>

<script>
import { rewriteDepth,release,cache_article,delArticle,edit_article } from "@/api/aiChange";
import deepOriginal from "./deepOriginal.vue";
import deepOriginalTitle from "./deepOriginalTitle.vue";
import Tinymce from "@/components/tinymce";
import { EventBus } from '@/utils/eventBus';
export default {
  name: 'deepRewrite',
  components: {
    Tinymce,
    deepOriginal,
    deepOriginalTitle
  },
  data () {
    return {
      tabs: [
        { title: '深度润色', link: '/aichange/deepRewrite' },
        { title: '深度原创', link: '/aichange/aiChange/deepOriginal' },
        { title: '原创标题', link: '/aichange/aiChange/deepOriginalTitle' },
        // ...更多tab
      ],
      currentTab: 0, // 当前选中的tab索引
      currentBtn: 0,
      iconText: 'el-icon-arrow-up',
      inputState: true,

      title: '',
      loading: false,
      loadings: false,
      editorData: '',
      innerVisible: false,
      dialogVisible: false,
      current_page: 1,
      per_page: 15,
      total: 0,
      form: {
        theme: 10,
        source_text: '',
      },
      tableData: [],
      typeOption: [
        {
          name: '百家号',
          value: 10
        }, {
          name: '头条号',
          value: 20
        }, {
          name: '微信公众号',
          value: 30
        }, {
          name: '企鹅号',
          value: 40
        }, {
          name: '大鱼号',
          value: 50
        },
      ],
      options: [
        {
          label: '营销文章',
          value: 10
        },{
          label: '新闻报道',
          value: 20
        },{
          label: '分析报告',
          value: 30
        },{
          label: '广告文案',
          value: 40
        },{
          label: '记叙文',
          value: 50
        },{
          label: '抒情散文',
          value: 60
        },{
          label: '旅游攻略',
          value: 70
        },{
          label: '其他',
          value: 80
        },
      ],
      value1: 3,
      images: [],
      routesList: [],
      title: ''
    }
  },
  computed: {
  },
  mounted() {
    // this.$router.options.routes.map(item => {
    //   if (item.path === '/aichange') {
    //     this.routesList.push(...item.children)
    //   }
    // })
  },
  methods: {
    goEdit(row) {
      this.$router.push(
        {
          path:'/aichange/articleDetail',
          query: {
            id: row.cache_article_id
          }
        }
      )
    },
    changeInput() {
      this.inputState = !this.inputState
      if (this.inputState) {
        this.iconText = 'el-icon-arrow-down'
      } else {
        this.iconText = 'el-icon-arrow-up'
      }
    },
    reset() {
      this.textarea = ''
    },
    reset1 () {
      this.textarea = ''
      this.editorData = ''
    },
    tabsChange(item,index) {
      console.log(item)
      this.currentTab = index
      // this.$router.push(item.link)
    },
    btnChange(item,index) {
      this.currentBtn = index
      this.form.theme = this.options[index].value
      // this.$router.push(item.link)
    },
    synonym() {
      const query = {
        form: {
          source_text: this.textarea,
          type: 20,
          theme: this.form.theme,
          title: this.form.title
        }
      }
      query.form = this.form
      query.form.type = 20
      this.loading = true
      rewriteDepth(query).then(res => {
        console.log(res)
        this.$message.success(res.message)
        this.form.title = ''
        this.form.source_text = ''
        this.loading = false
      }).catch(()=> {
        this.loading = false
      })
    },
    inputevent(e) {
      console.log(e)
      if (this.form.source_text) {
         EventBus.$emit('siblingEvent', true);
      } else {
         EventBus.$emit('siblingEvent', e);
      }
    },
    saveArticle() {
      let query = {
        form: {
          title: this.title,
          html_content: this.editorData
        }
      }
      edit_article(query,this.value1).then(res => {
        this.$message.success(res.message)
        this.editorData = ''
      })
    },
    delArticle(row) {
      this.$confirm('是否删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delArticle({cacheArticleId: row.cache_article_id}).then(res=> {
          this.$message.success(res.message)
          this.record()
        })
      })
    },
    submitDia(row) {
      this.innerVisible = true
      this.value1 = row.cache_article_id
    },
    submit() {
      this.loadings = true
      let query = {}
      if (this.form.type&&this.form.module) {
        query = {
          form: {
            type: this.form.type,
            module: this.form.module,
            cacheArticleId: this.value1,
          }
        }
      }
      release(query).then(res=> {
        console.log(res)
        this.$message.success(res.message)
        this.innerVisible = false
        this.dialogVisible = false
        this.loadings = false
      }).catch(()=> {
        this.loadings = false
      })
    },
    record() {
      this.dialogVisible = true
      cache_article({type: 20}).then(res=> {
        console.log(res)
        this.tableData = res.data.list.data
        this.current_page = res.data.list.current_page
        this.per_page = res.data.list.per_page
        this.total = res.data.list.total
      })
    },
    handleSizeChange(val) {
      this.per_page = val
      this.record()
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.record()
    },
  }
}
</script>

<style lang="scss" scoped>

.deepRewrite {
  padding: 20px 0;
  // display: flex;
}
.content {
  flex: 1;
}
.flex {
  display: flex;
}
.types {
  width: 240px;
  height: 650px;
  display: flex;
  margin-top: 15px;
  flex-direction: column;
  align-items: center;
  background-color: #EEF1FF;
  border-radius: 8px;
  .title {
    font-size: 16px;
  }
}
.colorBtn {
  background-color: #97aaff;
  color: #fff;
}
.htmlContent {
  width: 100%;
  height: 538px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 20px;
  overflow-y: scroll;
  font-size: 14px;
  line-height: 1.5;
}
.tabs {
  position: relative;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* 启用iOS的滚动回弹效果 */
}

.tabs-header {
  display: flex;
  overflow-x: auto;
  scroll-snap-align: start;
  scroll-padding: 50px; /* 根据需要调整，以显示部分下一个tab */
  scroll-behavior: smooth; /* 平滑滚动 */
  background-color: #EEF1FF;
  border-radius: 27px;
  transition: all 0.5s ease; /* 过渡效果 */
  will-change: all; /* 提示浏览器这个元素可能会有变化，以便优化性能 */
  scroll-snap-align: start;
}

.tabs-header button {
  flex: 1;
  font-size: 16px;
  // flex: 0 0 auto;
  /* 添加样式以区分不同的tab */
  padding: 15px 30px;
  border: none;
  overflow: hidden;
  background-color: #EEF1FF;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in; /* 添加过渡效果 */
}
.btnInput {
  width: 100%;
  border-radius: 27px;
  font-size: 20px;
  // flex: 0 0 auto;
  /* 添加样式以区分不同的tab */
  padding: 15px 30px;
  border: none;
  background-color: #B1B2FF;
  cursor: pointer;
  color: #fff;
}
.tabs-header button.active {
  border-radius: 27px;
  background-color: #B1B2FF;
  color: #fff;
}

.tabs-content {
  display: flex;
  transition: all 0.5s ease; /* 过渡效果 */
  will-change: all; /* 提示浏览器这个元素可能会有变化，以便优化性能 */
  scroll-snap-align: start;
  width: 100%; /* 根据需要调整 */
}

.tabs-content > div {
  flex: 0 0 100%; /* 每个tab的内容占据整个宽度 */
  padding: 20px;
  /* 添加其他样式以区分不同的tab内容 */
}
.btn-content {
  display: flex;
  flex-direction: column;
}
.btn-content button {
  color: #2c2c2c;
  background-color: #D2DAFF;
  width: 160px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border: none;
  overflow: hidden;
  cursor: pointer;
  border-radius: 20px;
  margin-bottom: 20px;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in; /* 添加过渡效果 */
}
.btn-content button.active {
  border-radius: 20px;
  background-color: #B1B2FF;
  color: #fff;
}
.textarea-box {
    :deep(.el-textarea__inner){
        border-radius: 16px;
        border-color:#E5E5E5
    }
}
.textarea-box:hover{
     :deep(.el-textarea__inner){
        box-shadow: 0px 8px 24px -1px rgba(91,111,151,0.12);
    }
}
.text-box{
   :deep(.el-input__inner) {
        border-radius: 10px;
        border-color:#E5E5E5
   }
}
</style>

